.main-wrapper {
    min-height: 50vh;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.scroll, .scroll-entete, .scroll-demi {
    height: 50vh;
    overflow: scroll;
}

.scroll2 {
    overflow-x: auto;
}

.from-row {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 100%;
    box-shadow: 0 0 20px -3px rgba(161, 161, 161, 0.75);
    border-radius: 8px;
}

.from-row>div {
    padding: 1rem 1rem;
}

.from-col-right {
    flex: 1;
    background: #ff8601;
    color: #fff;
    min-width: fit-content;
    text-align: center;
}

.from-col-left h3 {
    font-size: X-large;
    color: #ff8601;
}

.from-col-left {
    width: 100%;
    margin: auto;
    padding-bottom: 0 !important;
}

.from-item {
    margin: 0.5rem;
    text-align: left;
    display: inline-block;
    padding: 5px;
    box-shadow: 0px 0px 25px -3px rgba(0, 0, 0, 0.75);
    width: 200px;
}

.agent-item .from-item {
    width: 80%;
    box-shadow: -10px 7px 0px 0px rgba(255, 134, 1, 1);
}

.from-item-list {
    width: fit-content;
    margin: auto;
    text-align: center;
}

.from-item label {
    text-transform: capitalize;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    margin-bottom: 0.7rem;
    display: block;
}

.from-group {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: row;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    word-wrap: break-word;
}

.from-group h6 {
    margin: 0;
}

.from-group span {
    opacity: 0.8;
}

.table {
    display: table;
    width: 100%;
}

.agence-admin {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bouton-reservation {
    display: flex;
}

.bouton-reservation1 {
    margin-right: 0.2rem;
}

button {
    padding: 0.5rem 0.5rem;
}

.from-control {
    width: 100%;
    border: none;
    outline: 0;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 300;
    letter-spacing: 1px;
    padding-left: 0.4rem;
}

.sim-prix{
    border-top: 0;
}

.from-control::placeholder {
    opacity: 0.8;
    text-transform: capitalize;
}

/* Gestion de l'accueil */
.tom-accueil,
.suivez-nous {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tom-accueil1{
    /* max-height: fit-content; */
}
.tom-accueil1 div {
    /* height: 100%; */
    /* height: fit-content; */
}

.suivez-nous h3 {
    margin-right: 1rem;
}

.suivez-nous a {
    margin: 0rem 0.7rem;
}

.accordion {
    border-bottom: #ff8601 1px solid;
    margin: 0 0.5rem;
    padding: 0;
}

.accordion-button {
    margin: 0;
}

.accordion-button::after {
    content: "👇";
    background-image: none !important;
    color: red !important;
    font-weight: bold;
    transform: none !important;
}

.accordion-button:not(.collapsed)::after{
    /* content: "<"; */
    color: green;
}

.content-center {
    margin: auto;
}

/* affichache du bloc d'identite en bloc */
.document {
    display: inline;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.document a {
    transition-duration: NaNs !important
}

.document>div {
    /* display: block; */
    width: 100%;
    height: 2.5rem;
    text-align: center;
    padding-top: 0.5rem;
    margin: 0;
    font-family: HelvNeueOrange, Helvetica Neue, Helvetica, Arial, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: .125rem solid #ccc;
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.bouton-ville {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 0.2rem;
}

.bouton-ville a {
    margin-right: 0.5rem;
}

/* pour le pop-up */
.modal-content {
    display: block;
    border-radius: 7px;
    box-shadow: -3px 3px 0px 0px rgba(255, 134, 1, 0.9);
}

.ima, .esim-ima{
    max-height: 300px;
}
.ima-petit{
    display: block;
}
.ima-moyen, .ima-grand{
    display: none;
}

.agence-statut{
    width: 20px;
}

/* 250623 */
.login-center {
    display: flex;
    border: #ff8601 2px solid;
    margin-bottom: 2rem;
}
.login-center h3 {
    margin: auto;
}

/* 250625 --gestion new parcours esim */
.flex-row-esim>div {
    min-width: 45%;
}
.flex-row-esim .from-group {
    display: block;
    margin: 0.7rem;
    padding: 0;
}
.flex-row-esim .from-group h5 {
    margin: 0 !important;
}
.flex-piece {
    width: 100%;
    border-radius: 25px;
    border: #000 1px solid;
    margin: auto;
    text-align: center;
}
.flex-piece img {
    min-width: 250px;
    width: 55%;
}

/* Media Queries */
@media screen and (min-width: 600px) {
    .flex-row-esim {
        display: flex;
    }

    .from-item-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .bouton-reservation1 {
        margin-right: 1rem;
    }
    .ima, .esim-ima{
        max-height: 375px;
    }
    .ima-moyen{
        display: block;
    }
    .ima-petit, .ima-grand{
        display: none;
    }

    .suivez-nous {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

/* Tablette */
@media screen and (min-width: 768px) {
    .ima{
        /* height: 100%; */
        min-height: 640px;
        max-height: 640px;
    }
    .ima-grand{
        display: block;
    }
    .ima-petit, .ima-moyen{
        display: none;
    }
    .esim-ima{
        min-height: 480px;
        max-height: 480px;
    }
    
    .scroll-demande {
        height: 200pt;
        overflow: auto;
        vertical-align: top;
        margin: 0;
    }

    .scroll-accueil2 {
        height: 475pt;
        overflow: auto;
        vertical-align: top;
        margin: 0;
    }

    .scroll-demande, .scroll-accueil2{
        /* Enlever la bar de defilement pour IE & Firefox */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scroll-demande::-webkit-scrollbar, .scroll-accueil2::-webkit-scrollbar{
        /* Pour chrome */
        display: none;
    }

    .from-item-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .agent-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
    }

    .agent-item .from-item {
        margin: 1rem 3rem;
    }

    .agence-admin {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .tom-accueil {
        max-width: 960px;
        margin: 0 auto;
        /* height: fit-content; */
        padding: 0 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }
}

@media screen and (min-width: 1050px) {
    .main-wrapper{
        min-height: 85vh;
        /* max-height: fit-content; */
        height: 90vh;
        position: absolute;
        top: 62px;
    }
    .from-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .scroll {
        height: 70vh;
    }
    .scroll-demi {
        height: 65vh;
    }
    .scroll-entete {
        height: 57vh;
    }

    .from-item {
        margin: 0.2rem;
    }

    .from-item-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .from-col-right {
        display: flex;
        flex-direction: column;
        /* max-width: fit-content; */
        min-width: 250px;
    }
    .orange a{
        width: 100%;
    }

    .agent-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
    }
}

@media screen and (min-width: 1260px) {
    .from-item-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1500px) {
    .from-item-list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}